<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM事件</title>
    <style>
        .tool-btn {
            margin: 10px 0;
        }

        #content-id {
            width: 200px;
            margin-right: 10px;
        }

        span {
            color: red;
        }

        #a-div {
            border: 1px solid black;
            width: 500px;
            height: 300px;
            background-color: aliceblue;
        }

        #b-div {
            border: 1px solid black;
            width: 400px;
            height: 200px;
            background-color: aquamarine;
            margin: 50px auto;
        }

        #c-div {
            border: 1px solid black;
            width: 300px;
            height: 100px;
            background-color: bisque;
            margin: 50px auto;
        }
    </style>
</head>

<body>
    <div class="tool-btn">
        <button id="add">添加</button>
        <button id="add11">添加11</button>
    </div>

    <table id="table-id" border="1">
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>班级</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>男</td>
            <td>21级计算机10班</td>
            <td>
                <button onclick="deleteNode(this)">删除</button>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>女</td>
            <td>21级计算机10班</td>
            <td><button onclick="deleteNode(this)">删除</button></td>
        </tr>

    </table>

    <hr />

    身份证号：<input type="text" id="content-id" value="210404199803210914" />
    <button id="btn-parse">分析</button>
    <p>
        出生日期：<span id="birthday"></span>
    </p>
    <p>
        性别：<span id="sex"></span>
    </p>

    <hr />

    <DIV id="a-div"> a
        <div id="b-div"> b
            <div id="c-div"> c </div>
        </div>
    </DIV>

    <script>
        let btnAdd = document.getElementById('add');
        btnAdd.onclick = function () {
            // alert(11);
            let tb = document.getElementById('table-id');

            let num = tb.getElementsByTagName('tr').length;
            let doc = `
                <tr>
                    <td>${num}</td>
                    <td>AA</td>
                    <td>男</td>
                    <td>21级计算机10班</td>
                    <td><button onclick="deleteNode(this)">删除</button></td>
                </tr>
            `;

            tb.innerHTML = tb.innerHTML + doc;
        }

        function deleteNode(node) {
            let trNode = node.parentNode.parentNode;
            // let trNode = node.parentNode;
            trNode.parentNode.removeChild(trNode);
        }

        let btnParse = document.getElementById('btn-parse');
        btnParse.onclick = function (event) {
            let val = document.getElementById('content-id').value;

            let year = val.substring(6, 10);
            let month = val.substring(10, 12);
            let day = val.substring(12, 14);
            document.getElementById('birthday').innerHTML = year + '-' + month + '-' + day;

            let sex = val.substring(16, 17)
            document.getElementById('sex').innerHTML = (parseInt(sex) % 2 == 0) ? '女' : '男';
        }

        document.getElementById('content-id').onkeydown = function (event) {
            if (event.keyCode == 13) {
                let val = document.getElementById('content-id').value;

                let year = val.substring(6, 10);
                let month = val.substring(10, 12);
                let day = val.substring(12, 14);
                document.getElementById('birthday').innerHTML = year + '-' + month + '-' + day;

                let sex = val.substring(16, 17)
                document.getElementById('sex').innerHTML = (parseInt(sex) % 2 == 0) ? '女' : '男';

            }
        }

        document.getElementById('a-div').onclick = function (event) {
            alert('a');
        }

        document.getElementById('b-div').onclick = function (event) {
            alert('b');
            // event.stopPropagation();
        }

        document.getElementById('c-div').onclick = function (event) {
            alert('c');
            // event.stopPropagation();
        }

    </script>
</body>

</html>